<template>
  <div>
    <cus-modal ref="modal" title="模板下发配置" @on-visible-change="onVisibleChange" width="50" @onOk="onOk">

      <Card :dis-hover="true" style="min-height:200px">
        <p slot="title">全部伙食单位</p>
        <Tag v-for="item in kitchenList" :key="item.unitCode" :name="item.unitCode" :checked="item.checked"
          :color="item.checked ? 'blue' : 'default'"  :checkable="!item.checked" @on-change="changeCheck(item)">{{
      item.unitName }}</Tag>
      </Card>
      <br />
      <Card :dis-hover="true" style="min-height:200px">
        <p slot="title">已选伙食单位</p>

        <Tag v-for="(item, index) in selectList" :key="item.unitCode" :name="item.unitCode" closable
          @on-close="handleClose(item, index)">{{ item.unitName }}</Tag>
      </Card>
      <div class="hint" v-if="!selectList.length">*未选择伙食单位将默认全部下发</div>
    </cus-modal>
  </div>
</template>
<script>
import { getSubCanteenList } from '@/api/organ/organization'
import {
  reqUnderTemplate,
  saveUnderTemplate,
} from '@/api/organ/business'
export default {
  name: '',
  props: {},
  components: {
  },
  data() {
    return {
      kitchenList: [],
      mouldId: '',
      selectList: []

    }
  },
  methods: {
    show(id) {
      this.$refs["modal"].show = true
      this.mouldId = id

      this.getSubCanteenListApi()

    },
    // 查询伙食单位
    getSubCanteenListApi() {
      getSubCanteenList({ currentPage: 1, pageSize: 1000 }).then(res => {
        if (res.code == 1) {
          this.kitchenList = res.data.list
          this.reqUnderTemplateApi()
        }
      })
    },
    // 查询模板配置
    reqUnderTemplateApi() {
      reqUnderTemplate({ mouldId: this.mouldId }).then(res => {
        if (res.code == 1) {
          this.kitchenList.forEach(item => {
            item.checked = false
            res.data.forEach(el => {
              if (item.unitCode == el.diningCode) {
                this.selectList.push(item)
                item.checked = true
              } 
            })
            console.log('列表',this.kitchenList);
          });
        }
      })
    },
    // 保存模板配置
    onOk() {
      let diningCodes = []
      this.selectList.forEach(el => {
        diningCodes.push(el.unitCode)
      })
      saveUnderTemplate({ mouldId: this.mouldId, diningCodes }).then(res => {
        if (res.code == 1) {
          console.log(6776776)
          this.$Message.success('保存成功')
          this.$refs["modal"].show = false
        }
      })
    },
    onVisibleChange() {
      this.selectList = []
    },
    changeCheck(item) {
      if (item.checked) {
        this.$Message.info('该单位已选')
        return false
      } else {
        item.checked = true
        this.selectList.push(item)
      }
    },
    handleClose(item, index) {
      this.kitchenList.map(el => {
        if (el.unitCode == item.unitCode) {
          el.checked = false
        }
      })
      this.selectList.splice(index, 1)
      console.log(item, 4)
    }
  },
}
</script>
<style lang='scss' scoped>
.hint {
  position: absolute;
  margin-top: 5px;
  font-size: 8px;
  color: #ff9900;
}
</style>